<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="header in headers" :key="header">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.user_id">
          <td>{{ user.user_id }}</td>
          <td>{{ user.bu }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.enable_time }}</td>
          <td>{{ user.disable_time }}</td>
          <td>{{ user.queue_tasks }}</td>
          <td>{{ user.running_tasks }}</td>
          <td>
            <label class="switch">
              <input type="checkbox" :checked="user.enabled === 1" disabled />
              <span class="slider"></span>
            </label>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">分页: {{ pageId }}</div>
  </div>
</template>

<script>
import { getUserList } from '../api';

export default {
  data() {
    return {
      headers: [
        '用户编号', 'BU', 'email', '启用时间', '停用时间',
        '排队中的任务数量', '进行中的任务数量', '启用',
      ],
      users: [],
      pageId: 1,
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      const res = await getUserList({ page_id: this.pageId });
      this.users = res.data.map(user => ({ ...user, enabled: !!user.enabled }));
    },
  },
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}
.pagination {
  margin-top: 10px;
  text-align: center;
}

/* 开关按钮样式 */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}
</style>
